<template>
<!--  <TnNoticeBar :data="noticeData" left-icon="sound" left-icon-color="tn-grey" bg-color="tn-gray-light" color="#01beff" />-->
<!--      <view class="tip-banner">-->
<!--        <text class="icon">🔔</text>-->
<!--        <text class="text">防诈骗提示：脱离平台交易易导致：资金监管风险，纠纷维权</text>-->
<!--      </view>-->
<!-- 防诈骗提示 -->
  <view class="tip-banner">
    <text class="icon">🔔</text>
    <view class="marquee">
      <view class="marquee-content" :style="{ animationDuration: duration + 's' }">
        <text>{{text}}</text>
      </view>
    </view>
  </view>
  <view class="page">
    <!-- 关注公众号 -->
    <MessageTop v-if="isShowTip"></MessageTop>


    <!-- 消息列表 -->
    <scroll-view
        class="scroll-view"
        :refresher-threshold="10"
        scroll-y
        @scrolltolower="onScroll"
        ref="scrollViewRef"
        v-if="list.length > 0"
    >
      <view class="message-list">
        <view
            v-for="(item, index) in list"
            :key="index"
            class="msg-swipe-wrapper"
            @touchstart="handleTouchStart($event, index)"
            @touchmove="handleTouchMove($event, index)"
            @touchend="handleTouchEnd(index)"
        >
          <!-- 滑动内容区域 -->
          <view
              @tap="toPage(item)"
              class="msg-item"
              :style="{ transform: `translateX(${item.offsetX}px)` }"
          >
            <image :src="item.headSculpture" class="avatar" />
            <view class="content-message">
              <view class="top">
                <view class="name">
                  <text>
                    {{ item.nickname }}
                  </text>
                  <text style="color: #999999; margin-left: 2px; margin-right: 2px"> — </text>
                  <text style="color: #666666; display: inline-block; flex: 1; justify-content: space-between;overflow: hidden;white-space: nowrap; text-overflow: ellipsis; max-width: 200px;"> {{ item.title }}</text>
                </view>
                <view class="msg">{{ item.newMsg }}</view>
              </view>
              <view class="bottom">

                <view class="time">{{ formatDate(item.lastTime) }}</view>
                <view v-if="item.messageNum > 0" class="badge">{{ item.messageNum }}</view>
              </view>
            </view>
          </view>

          <!-- 删除按钮 -->
          <view class="delete-btn" @tap="deleteItem(index)">
            删除
          </view>
        </view>
      </view>
      <view style="height: 150rpx"></view>
    </scroll-view>
    <NoData v-if="list.length === 0" :message="'暂无消息'"></NoData>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import TnNoticeBar from '@tuniao/tnui-vue3-uniapp/components/notice-bar/src/notice-bar.vue'
import {customerMessageApi, updateMessageStatusApi} from "@/api/message";
import NoData from "@/composables/noData/NoData.vue";
import MessageTop from "@/composables/messageTop/index.vue";
import {getOaOpenidByOpenidApi} from "@/api/home";
import {formatDate} from "@/utils/common";
import {onShow} from "@dcloudio/uni-app";
const scrollViewRef = ref();
const onScroll = (e: string) => {
}
const noticeData = [
  '防诈骗提示：脱离平台交易易导致：资金监管风险，纠纷维权'
]

const toPage = (item: any) => {
  // 已读未读
  updateMessageStatusApi(item);
  // 页面跳转
  uni.navigateTo({
    url: `/pages/message/detail/deyail?userId=${item.senderId}&headSculpture=${item.headSculpture}&conversationId=${item.conversationId}&orderPayStatus=${item.orderPayStatus}`
  })
  setTimeout(() => {
    item.messageNum = 0;
  }, 2000)
}

const list = ref<any>([])

const startX = ref(0)

function handleTouchStart(e: TouchEvent, index: number) {
  startX.value = e.touches[0].clientX
}

function handleTouchMove(e: TouchEvent, index: number) {
  const deltaX = e.touches[0].clientX - startX.value
  list.value.forEach((item: any, i: number) => {
    item.offsetX = 0
    if (i === index) {
      item.offsetX = Math.min(0, Math.max(-75, deltaX))
    }
  })
}

function handleTouchEnd(index: number) {
  const item = list.value[index]
  item.offsetX = item.offsetX <= -40 ? -75 : 0
}

function deleteItem(index: number) {
  list.value.splice(index, 1)
}

/**
 * 获取消息列表
 */
const getList = async () => {
  // if (list.value.length > 0) {
  //   return;
  // }
  const res = await customerMessageApi();
  if (res?.code === 200) {
    list.value = res?.data || [];
  }
}

const isShowTip = ref(false);
const getOpenId = async () => {
  const userInfo = uni.getStorageSync("userInfo") || {}
  console.log(userInfo)
  const res = await getOaOpenidByOpenidApi(userInfo.openId);
   console.log(userInfo)
  if (res?.code === 200 && res?.data) {
    isShowTip.value = false;
  } else {
    isShowTip.value = true;
  }
}

const text = ref("系统会实时审核聊天信息，严厉打击引导用户脱离平台交易，互换微信，私聊推广等行为，如经发现必将严惩，甚至冻结资金和账号                  系统会实时审核聊天信息，严厉打击引导用户脱离平台交易，互换微信，私聊推广等行为，如经发现必将严惩，甚至冻结资金和账号");
const duration = ref(20); // 动画时长，默认 10s

onMounted(() => {
  // 根据文字长度动态调整动画时间，避免太快或太慢
  const textLength = text.value.length;
  duration.value = Math.max(8, textLength / 4); // 字越长滚动越慢
});

defineExpose({
  getList,
  getOpenId
})
const messages = ref<any[]>([])
const handleMessage = (msg: any) => {
  messages.value.push(msg)
}
onShow(() => {
  // getOpenId();
})
</script>

<style scoped lang="scss">
.page {
  background-color: #ffffff;
}

.tip-banner {
  background-color: #fff3e0;
  color: #f60;
  display: flex;
  align-items: center;
  padding: 12rpx;
  font-size: 24rpx;
}

.tip-banner .icon {
  margin-right: 10rpx;
}
.tip-banner .text {
  flex: 1;
}
.tip-banner .close {
  padding-left: 20rpx;
  font-size: 28rpx;
}

.message-list {
  margin-top: 10rpx;
}

/* 外包裹 */
.msg-swipe-wrapper {
  position: relative;
  overflow: hidden;
}

/* 可滑动内容 */
.msg-item {
  display: flex;
  background-color: #fff;
  z-index: 2;
  border-bottom: 1rpx solid #eee;
  transition: transform 0.2s ease;
  position: relative;
  padding: 24rpx;
  align-items: center;
  justify-content: space-between;
  .avatar {
    width: 92rpx;
    height: 92rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .content-message {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    .top {
      font-size: 30rpx;
      font-weight: 500;
      .name {
        color: #000000;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
      .msg {
        color: #999999;
        font-size: 24rpx;
        margin-top: 16rpx;
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .bottom {
      font-size: 26rpx;
      color: #999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      text-align: right;
      position: relative;
      .badge {
        position: absolute;
        right: 0;
        top: 25rpx;
        background-color: red;
        color: white;
        font-size: 20rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30rpx;
        height: 30rpx;
        margin-top: 15rpx;
      }
    }

  }
}

/* 删除按钮 */
.delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 150rpx;
  height: 100%;
  background-color: #F53F3F;
  color: white;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tip-banner {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background-color: #fff7e6;
  border-radius: 8rpx;
  overflow: hidden;

  .icon {
    font-size: 28rpx;
    margin-right: 12rpx;
  }

  .marquee {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;

    .marquee-content {
      display: inline-flex;
      animation: scroll-left linear infinite;
    }

    text {
      font-size: 28rpx;
      color: #ff4d4f;
      white-space: nowrap;
    }

    .gap {
      width: 80rpx; /* 两段文字之间的间隔 */
    }
  }
}

/* 往左滚动动画 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

</style>
